/**!
 * 代码由less文件生成！！！！
 * 请勿直接修改css
 */ 

@sidebar-bg: #535353;
@content-padding: 10px;
.sideItem() {
	background-color: @sidebar-bg;
	width: 100px;
	margin-bottom: 1px;
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
	text-align: left;
	transition: all .3s ease;
	a {
		color: inherit;
		text-decoration: none;
	}
	.iconfont {
		margin-right: 4px;
	}
	&:hover {
		background-color: #44b549;
		transform: translateX(-70px);
	}
}

.sidebar {
	position: fixed;
	top: 30px;
	bottom: 0;
	right: -318px;
	z-index: 200;
	transition: all .8s cubic-bezier(0, 1, 0, 1);
	.hidden_container {
		height: 100%;
		overflow: hidden;
	}
	.content_wrapper {
		position: absolute;
		height: 100%;
		background: #fff;
		width: 322px;
		right: 100%;
		transition: all 0.2s ease;
		border-left: 4px solid @sidebar-bg;
	}
	&.active {
		transform: translateX(-318px);
		.content_wrapper {
			opacity: 1;
		}
	}
	.side_btn {
		width: 0px;
		height: 100%;
		position: absolute;
		//left: 0px;
		right: 322px;
		color: white;
		text-align: center;
		top: 0;
		.middle-side {
			top: 50%;
			left: -30px;
			position: absolute;
			transform: translateY(-50%);
			.side-item {
				padding: 4px 8px;
				.sideItem()
			}
		}
	}
	.mer_mbar {
		padding: 6px;
		width: 30px;
		text-align: center;
		background-color: @sidebar-bg;
		cursor: pointer;
		transition: all .4s ease;
		&:hover {
			background-color: rgba(0, 0, 0, .8)
		}
	}
	.mer_text {
		line-height: 14px;
		margin: 6px 0 8px;
	}
	.mer_num {
		width: 18px;
		line-height: 18px;
		border-radius: 100%;
		background: red;
		font-size: 12px;
		margin-top: 3px;
	}
	.side_caption {
		color: inherit;
		font-size: 16px;
		padding: 12px;
		background-color: #e5e5e5;
	}
	.side_content {
		width: 100%;
		position: absolute;
		top: 50px;
		bottom: 0;
		> .btn-success {
			width: 100%;
			height: 40px;
			position: absolute;
			bottom: 0px;
			border-radius: 0;
		}
	}
	.side_con {
		width: 100%;
		border-radius: 4px;
		background: white;
		position: absolute;
		top: 0;
		bottom: 50px;
		overflow: auto;
		padding: 10px 10px 0px 18px;
		&::-webkit-scrollbar-track {
			background-color: #fff;
			opacity: 0;
		}
		&::-webkit-scrollbar {
			width: 5px;
			background-color: #ccc
		}
		&::-webkit-scrollbar-thumb {
			background: #999;
			border-radius: 4px
		}
		> div {
			width: 100%;
			background-color: #fff;
			padding: @content-padding;
			position: relative;
			display: flex;
			border: 1px solid #e5e5e5;
			margin-bottom: -1px;
			.comb-detail-title {
				flex: 1;
				max-height: 58px;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-left: 10px;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.comb-detail-img {
				height: 80px;
				width: 80px;
				flex: 0 0 80px;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			}
			.comb-detail-filter {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				text-align: center;
				opacity: 0;
				transition: all .4s ease;
				-webkit-transition: all .5s ease;
				> button {
					line-height: 30px;
					font-size: 18px;
					color: #fff;
					padding: 5px;
					background: transparent;
					position: relative;
					top: 40%;
					margin-top: -20px;
					margin-right: 12px;
				}
			}
			&:nth-child(2) {
				display: block;
				height: ~'calc(296px * 0.6)';
				> .comb-detail-img {
					width: 100%;
					height: 100%;
					flex: none;
				}
				> .comb-detail-title {
					position: absolute;
					flex: none;
					bottom: 0;
					padding: @content-padding;
					left: @content-padding;
					right: @content-padding;
					bottom: @content-padding;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					z-index: 1;
				}
			}
			&:hover > .comb-detail-filter {
				opacity: 1;
			}
		}
		> p {
			left: 0;
			right: 0;
			position: absolute;
			top: 50%;
			text-align: center;
			color: #999590;
			> span {
				vertical-align: middle;
			}
		}
	}
	.phone_preview {
		position: absolute;
		top: 10px;
		bottom: 50px;
		left: 15px;
		right: 15px;
		.frame_container {
			position: absolute;
			top: 18px;
			left: 0px;
			right: 0px;
			bottom: 0;
			.frame_preview_area {
				width: 100%;
				height: 100%;
				border: 0;
			}
		}
		#send-to-phone-preview {
			width: 100%;
			height: 35px;
			position: absolute;
			bottom: 14px;
		}
		.phone_edit_preview {
			position: absolute;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			min-height: 400px;
			max-height: 560px;
			overflow: hidden;
			z-index: 1;
			border: 1px solid #c7c7c7;
			>.do_preview_area {
				position: absolute;
				top: 18px;
				left: 0px;
				right: 0px;
				bottom: 0;
			}
			>.scroll_parent {
				display: none;
				width: 5px;
				position: absolute;
				height: 468px;
				top: 21px;
				right: 9px;
				z-index: 1;
				>.scroll {
					position: absolute;
					right: 0;
					top: 0;
					width: 100%;
					height: 50px;
					background-color: #000;
					opacity: 0.4;
					border-radius: 4px
				}
			}
			.send_preview_abs {
				position: absolute;
				top: 0px;
				right: 0px;
				left: 0px;
				bottom: 10px;
				min-height: 460px;
				max-height: 610px;
			}
			.phone_edit_img {
				width: 100%;
				height: 100%;
				background: url("./phone_editor.png") no-repeat;
				background-size: 100% auto;
				background-color: #fff;
			}
		}
	}
	/* ------------------------------------------------ */
	.gadget {
		position: absolute;
		left: -30px;
		bottom: 0;
		transition: all .4s ease;
		&.bottom-trans {
			transform: translate(0px, 64px);
		}
		.gadget-item {
			background-color: @sidebar-bg;
			color: #fff;
			line-height: 1;
			padding: 8px 8px;
			cursor: pointer;
			visibility: hidden;
			opacity: 0;
			&.visibility-visible {
				visibility: visible;
				opacity: 1;
			}
			.sideItem();
			&.scan-joinus {
				cursor: default;
				position: relative;
				width: 30px;
				&:hover {
					transform: none;
					background-color: @sidebar-bg;
					border-radius: 0;
					.scan-wrapper {
						visibility: visible;
						opacity: 1;
					}
				}
				.scan-wrapper {
					position: absolute;
					width: 200px;
					right: 100%;
					bottom: 0;
					visibility: hidden;
					opacity: 0;
					transition: all .4s ease;
					.scan-tab {
						font-size: 0;
						.scan-tab-item {
							display: inline-block;
							width: 50%;
							font-size: 14px;
							padding: 13px 10px;
							text-align: center;
							border-top-left-radius: 4px;
							border-top-right-radius: 4px;
							background-color: rgba(0, 0, 0, .8);
							&.active {
								background-color: @sidebar-bg;
							}
							&:not(.active) {
								cursor: pointer;
							}
							&:first-child {
								width: ~'calc(50% - 1px)';
								margin-right: 1px;
							}
						}
					}
					.scan-content-item {
						text-align: center;
						padding: 20px 0;
						background-color: @sidebar-bg;
						&:nth-child(2) {
							display: none;
						}
						img {
							width: 100px;
						}
					}
				}
			}
			.iconfont {
				font-size: 16px;
				vertical-align: middle;
				margin-right: 6px;
			}
			.text {
				vertical-align: middle
			}
		}
	}
	.qr_code_container {
		position: fixed;
		right: 20px;
		bottom: 30px;
		z-index: 300;
	}
	.qr_code_container .btn_qr_code {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		border: 1px solid #9E9A94;
		font-size: 26px;
		background-color: transparent;
		display: block;
		color: #9E9A94;
		text-align: center;
		-webkit-transition: all .5s ease;
		-o-transition: all .5s ease;
		transition: all .5s ease;
	}
	.qr_code_container a.btn_qr_code {
		line-height: 42px;
	}
	.qr_code_container .btn_qr_code:hover {
		color: #44b549;
		border-color: #44b549;
		text-decoration: none;
	}
	.qr_code_container .icon-weixin {
		font-size: 24px;
		margin-top: 6px;
	}
	.qr_code_container .qrcode_img {
		position: absolute;
		right: 100%;
		bottom: 0;
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
		background-color: #fff;
		width: 112px;
		height: 132px;
		display: none;
	}
	.qr_code_container:hover .qrcode_img {
		display: block;
	}
	.qr_code_container .qrcode_img img {
		width: 100%;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
	}
	.qr_code_container .qrcode_img .qr_text {
		position: absolute;
		left: 0;
		bottom: 2px;
		width: 100%;
	}
}

.phone-preview>.sendToPhone {
	width: 100%;
	margin-top: 12px;
	height: 35px
}


/* 模拟预览区域 */

.article_preview_area {
	padding: 14px 10px 10px;
	word-break: break-all;
	word-wrap: break-word;
	overflow-y: auto;
	overflow-x: hidden;
	font-family: "Lato", "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
	.article_title {
		font-size: 20px;
		font-weight: 400;
		margin-bottom: 10px;
		line-height: 1.4;
	}
	.art_date_author {
		font-size: 0;
		margin-bottom: 20px;
		.article_meta_text {
			font-size: 15px;
			margin-right: 8px;
		}
		.art_date, .art_author {
			color: #8c8c8c;
		}
		.art_from {
			color: #607fa6
		}
	}
	&::-webkit-scrollbar-track {
		background-color: #fff;
		opacity: 0
	}
	&::-webkit-scrollbar {
		width: 5px;
		background-color: #ccc
	}
	&::-webkit-scrollbar-thumb {
		background: #999;
		border-radius: 4px
	}
}